<template>
	<div class="mainPageRow">
		<div :gutter="10" class="mainPageOne-box">
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<div class="titleText">故障统计</div>
					</div>

					<v-FaultStatistics></v-FaultStatistics>
				</div>
			</el-col>
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<p class="titleText">节点健康度</p>
					</div>
					<v-RealTime></v-RealTime>
				</div>
			</el-col>
		</div>

		<div :gutter="10" class="mainPageTwo-box">
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<div class="titleText">雷达扫描</div>
					</div>
					<v-rader></v-rader>
				</div>
			</el-col>
			<el-col>
				<div class="gradientBox">
					<div class="gztj"><p class="titleText">连接检测</p></div>
					<v-Linktest></v-Linktest>
				</div>
			</el-col>
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<p class="titleText">业务健康状态</p>
					</div>
					<v-BusinessMatrix></v-BusinessMatrix>
				</div>
			</el-col>
		</div>

		

		<div :gutter="10" class="mainPageFour-box">
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<p class="titleText">数据库负载排名</p>
					</div>
					<v-DatabaseLoad></v-DatabaseLoad>
				</div>
			</el-col>
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<p class="titleText">服务器负载排名</p>
					</div>
					<v-ServerLoad></v-ServerLoad>
				</div>
			</el-col>
			<el-col>
				<div class="gradientBox">
					<div class="gztj">
						<p class="titleText">网络流量排名</p>
					</div>
					<v-NetWorkLoad></v-NetWorkLoad>
				</div>
			</el-col>
		</div>
		<div :gutter="10" class="mainPageThree-box">
			<el-col :span="24">
				<div class="gradientBox">
					<div class="gztj"><p class="titleText">告警日志</p></div>
					<v-warningLog></v-warningLog>
				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
import config from '../../../../../public/config.js';
import bus from 'common/bus.js';
import vRader from 'dashboard/mainPage/Rader.vue';
import vFaultStatistics from 'dashboard/mainPage/FaultStatistics.vue';
import vWarningLog from 'dashboard/mainPage/WarningLog.vue';
import vDatabaseLoad from 'dashboard/mainPage/DatabaseLoad.vue';
import vServerLoad from 'dashboard/mainPage/ServerLoad.vue';
import vNetWorkLoad from 'dashboard/mainPage/NetWorkLoad.vue';
import vRealTime from 'dashboard/mainPage/RealTime.vue';
import vLinktest from 'dashboard/mainPage/Linktest.vue';
import vBusinessMatrix from 'dashboard/mainPage/BusinessMatrix.vue';
import { getUserData } from '@/utils/IndexedDB.js';
import { dynamic_routes } from '@/router/dynamic_routes';
import router from '@/router';
export default {
	data() {
		return {};
	},
	components: {
		vRader,
		vFaultStatistics,
		vWarningLog,
		vDatabaseLoad,
		vServerLoad,
		vNetWorkLoad,
		vRealTime,
		vLinktest,
		vBusinessMatrix,
	},
	computed: {},
	created() {
		// this.initRoute();
	},
	methods: {
		
	},
	beforeDestroy() {},
};
</script>

<style scoped>
@media screen and (max-width: 1280px){
	.titleText {
		font-size: 16px;
	}
	.mainPageRow {
		height: calc(90vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom))  calc(13vh /var(--zoom));
		margin: 4px;
	}

	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(14vh /var(--zoom));
	
}
}
@media screen and (max-width: 1365px) and (min-width: 1280px) {
	.titleText {
		font-size: 16px;
	}
	.mainPageRow {
		height: calc(90vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom))  calc(13vh /var(--zoom));
		margin: 4px;
	}

	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(14vh /var(--zoom));
	
}
}
@media screen and (max-width: 1400px) and (min-width: 1365px) {
	.titleText {
		font-size: 18px;
	}
	.mainPageRow {
		height: calc(92vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom))  calc(13vh /var(--zoom));
		margin: 4px;
	}

	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(14vh /var(--zoom));
	
}
}
@media screen and (max-width: 1599px) and (min-width: 1400px) {
	.titleText {
		font-size: 18px;
	}
	.mainPageRow {
		height: calc(90vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom))  calc(16vh /var(--zoom)) calc(16vh /var(--zoom));
		row-gap: 15px;
		/* background: red; */
		/* background: salmon; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}

	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
	
}
}
@media screen and (max-width: 1778px) and (min-width: 1599px) {
	.titleText {
		font-size: 18px;
	}
	.mainPageRow {
		height: calc(92vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom)) ;
		row-gap: 15px;
		/* background: salmon; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}
	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(14vh /var(--zoom));
	
}
}
@media screen and (max-width: 1920px) and (min-width: 1778px) {
	.titleText {
		font-size: 20px;
	}
	.mainPageRow {
		height: calc(93vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		/* background: red; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}
	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
	
}
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
	.titleText {
		font-size: 22px;
	}
	.mainPageRow {
		height: calc(90vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		/* background: red; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}
	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
	
}
}
@media screen and (max-width: 3840px) and (min-width: 2560px) {
	.titleText {
		font-size: 24px;
	}
	.mainPageRow {
		height: calc(93vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		/* background: red; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}
	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
	
}
}
@media screen and (min-width: 3840px) {
	.titleText {
		font-size: 30px;
	}
	.mainPageRow {
		height: calc(93vh /var(--zoom));
		display: grid;
		grid-template-rows: calc(20vh /var(--zoom)) calc(33vh /var(--zoom)) calc(16vh /var(--zoom)) calc(17vh /var(--zoom));
		row-gap: 15px;
		/* background: red; */
	}
	.mainPageFour-box .gradientBox {
		display: grid;
		grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
		margin: 4px;
	}
	.mainPageThree-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(13vh /var(--zoom));
	
}
}
.mainPageRow {
	/* min-height: 540px;
	overflow-y: scroll; */
	overflow: hidden;
	
	color: aliceblue;

}
.mainPageRow .mainPageOne-box {
	display: grid;
	column-gap: 4px;
	grid-template-columns: 2fr 1fr;
	
}
.mainPageRow .mainPageTwo-box {
	display: grid;
	column-gap: 4px;
	grid-template-columns: 1fr 1fr 1fr;
	
}
.mainPageRow .mainPageThree-box {
	display: grid;
	
}
.mainPageRow .mainPageFour-box {
	display: grid;
	column-gap: 4px;
	grid-template-columns: 1fr 1fr 1fr;
	
}

.mainPageOne-box > div {
	height: 100%;
}
.mainPageOne-box div {
	/* display: grid;
  column-gap: 3px; */
}
.mainPageOne-box .gradientBox {
	/* height: calc(100% - 11px * 2); */
	display: grid;
	grid-template-rows: calc(3vh /var(--zoom)) calc(17vh /var(--zoom));
	/* column-gap: 13px; */
	margin: 4px;
	height: 100%;
}
/* .mainPageOne-box{
    padding-top: 10px;
} */
.mainPageThree-box {
	/* padding: 0 4px; */
	
}
.mainPageTwo-box > div {
	height: 100%;
}
.mainPageTwo-box .gradientBox {
	
	display: grid;
	grid-template-rows: calc(4vh /var(--zoom)) calc(28vh /var(--zoom));
	margin: 4px;
	height: 100%;
}

.mainPageThree-box > div {
	height: 100%;
	/* margin-bottom: 4px; */
}


.mainPageFour-box > div {
	height: 100%;
	
}
/* .mainPageFour-box {
	margin-left: 4px;
	margin-right: 4px;
} */

.gradientBox {
	/* padding: 7px 10px;
  margin-bottom:10px; */
	overflow: hidden;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0px 0px 24px rgb(1, 40, 107) inset !important;
}
.gradientBox .gztj {
	display: grid;
	align-items: center;
	justify-items: center;
}
.gradientBox:last-child {
	margin-bottom: 0;
}

.titleText {
	width: 60%;
	/* margin: 0 auto 8px auto; */
	border-radius: 20px;
	box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
	line-height: 22px;
}
</style>
